<template>
	<div :class="['app-raw-item', 'app-raw', `app-raw-${name}`]">
		<div class="raw-caption" v-if="caption" :style="rawStyle">
			{{ caption }}
		</div>
		<div v-if="Object.is(contentType, 'RAW')">
			<template v-if="Object.is(renderMode, 'TEXT')">
				<span :style="rawStyle">{{ getContentValue }}</span>
			</template>
			<template v-else-if="Object.is(renderMode, 'HEADING1')">
				<h1 :style="rawStyle">{{ getContentValue }}</h1>
			</template>
			<template v-else-if="Object.is(renderMode, 'HEADING2')">
				<h2 :style="rawStyle">{{ getContentValue }}</h2>
			</template>
			<template v-else-if="Object.is(renderMode, 'HEADING3')">
				<h3 :style="rawStyle">{{ getContentValue }}</h3>
			</template>
			<template v-else-if="Object.is(renderMode, 'HEADING4')">
				<h4 :style="rawStyle">{{ getContentValue }}</h4>
			</template>
			<template v-else-if="Object.is(renderMode, 'HEADING5')">
				<h5 :style="rawStyle">{{ getContentValue }}</h5>
			</template>
			<template v-else-if="Object.is(renderMode, 'HEADING6')">
				<h6 :style="rawStyle">{{ getContentValue }}</h6>
			</template>
			<template v-else-if="Object.is(renderMode, 'PARAGRAPH')">
				<p :style="rawStyle">{{ getContentValue }}</p>
			</template>
		</div>
		<div
			v-else-if="Object.is(contentType, 'HTML')"
			v-html="getContentValue"
			:style="rawStyle"
		/>
		<div v-else-if="Object.is(contentType, 'IMAGE')" :style="rawStyle">
			<van-image v-if="imgPath" :src="imgPath" />
			<i v-else :style="rawStyle" :class="iconClass ? iconClass : ''"></i>
		</div>
		<template v-else-if="Object.is(contentType, 'DIVIDER')">
			<van-divider v-bind="dividerParams">
				<div v-html="dividerParams.html"></div>
			</van-divider>
		</template>
		<template v-else-if="Object.is(contentType, 'INFO') || Object.is(contentType, 'WARNING') || Object.is(contentType, 'ERROR')">
			<van-notice-bar v-bind="alertParams" />
		</template>
	</div>
</template>

<script setup lang="ts">
import { rawProps, renderModeType } from './raw';

const props = defineProps(rawProps);
const renderMode: renderModeType =
	props.rawItemDetail && props.rawItemDetail.renderMode
		? props.rawItemDetail.renderMode
		: 'TEXT';
const rawStyle =
	props.rawItemDetail && props.rawItemDetail.rawStyle
		? props.rawItemDetail.rawStyle
		: '';
//直接内容
let getContentValue = computed(() => {
	let content = props.value || '';
	if (content) {
		const items = content.match(/\{{(.+?)\}}/g);
		if (items) {
			items.forEach((item: string) => {
				content = content.replace(
					/\{{(.+?)\}}/,
					eval(item.substring(2, item.length - 2))
				);
			});
		}
		content = content.replaceAll('&lt;', '<');
		content = content.replaceAll('&gt;', '>');
		content = content.replaceAll('&amp;nbsp;', ' ');
		content = content.replaceAll('&nbsp;', ' ');
	}
	return content;
});
</script>
